<script setup>
import { ref } from "vue";
import { useRoute, useRouter } from "vue-router";
import { http } from "../services/service";
import { useUserStore } from "../store/index";
import { useI18n } from "vue-i18n";
const i18nUse = useI18n();
const store = useUserStore();
const router = useRouter();
const route = useRoute();
const value1 = ref("");
const value2 = ref("");
const value3 = ref("");

const back = () => {
  router.go(-1);
};
const cardListDto = ref([]);
const cardType = ref();
const releasePrice = ref();
const rate = ref();
const discountPrice = ref();
const fieldValue = ref();
const getCardList = () => {
  http.get(`/api/v1/center/getAppCardTypeList`).then(
    (response) => {
      const data = response?.data?.data;
      if (response?.data.code === 200) {
        const map = {
          1: i18nUse.t("upperFour"),
          2: i18nUse.t("middleFour"),
          3: i18nUse.t("lowerFour"),
        };
        cardListDto.value = data.map((e) => {
          return {
            ...e,
            text: map[e.id],
            value: e.id,
          };
        });
      }
    },
    () => {}
  );
};
getCardList();

const getPrice = (release) => {
  discountPrice.value = "";
  http
    .get(
      `/api/v1/center/compoundCalculate?telegramId=${store?.getUser?.telegramId}&releaseAmount=${release}`
    )
    .then(
      (response) => {
        discountPrice.value = response?.data?.data.needStarNumber;
      },
      () => {}
    );
};

const showPicker = ref(false);

const combineCard = () => {
  http
    .get(
      `/api/v1/center/compound?telegramId=${store?.getUser?.telegramId}&cardTypeId=${cardType.value}&releaseAmount=${releasePrice.value}&discountAmount=${discountPrice.value}`
    )
    .then(
      (response) => {
        if (response?.data?.code === 200 && response?.data?.data) {
          showToast(i18nUse.t("combine_successfull"));
          router.push({ path: "/myBag", query: { combine: cardType.value } });
        } else {
          showToast(response?.data?.message);
        }
      },
      () => {}
    );
};

const onConfirm = ({ selectedOptions }) => {
  showPicker.value = false;
  fieldValue.value = selectedOptions[0].text;
  cardType.value = selectedOptions[0].value;
  rate.value = `${selectedOptions[0].cardGrowthRate * 100}%`;
};

const handleChange = (e) => {
  getPrice(releasePrice.value);
};
</script>

<template>
  <div class="container">
    <van-popup v-model:show="showPicker" round position="bottom">
      <van-picker
        :columns="cardListDto"
        :confirm-button-text="$t('confirm')"
        :cancel-button-text="$t('cancel')"
        @cancel="showPicker = false"
        @confirm="onConfirm"
      />
    </van-popup>
    <div class="title">
      <van-icon
        name="arrow-left"
        class="icon-left"
        size="25"
        @click="back()"
      />{{ $t("combineCard") }}
    </div>
    <div class="withDraw">
      <van-field
        v-model="fieldValue"
        readonly="readonly"
        :label="$t('selectCards')"
        :placeholder="$t('please_choose')"
        @click="showPicker = true"
      />
      <van-field
        v-model="rate"
        :disabled="true"
        :label="$t('inflationRate')"
        placeholder=""
      />
      <van-field
        v-model="releasePrice"
        @blur="handleChange"
        :label="$t('releasePrice')"
        placeholder=""
      />
      <van-field
        v-model="discountPrice"
        :label="$t('discountPrice')"
        :disabled="true"
        placeholder=""
      />
      <van-field
        v-model="value3"
        :label="$t('combineCard')"
        label-width="100px"
        :disabled="true"
        :placeholder="$t('random')"
      />
    </div>
    <div class="confirm">
      <van-button
        type="primary"
        block
        @click="combineCard()"
        :disabled="!releasePrice || !discountPrice || !fieldValue"
        >{{ $t("combine") }}
      </van-button>
    </div>
  </div>
</template>

<style scoped lang="less">
.confirm {
  width: 70%;
  margin: 20px auto;

  button {
    background-image: linear-gradient(to right, #9ba8ff, #4a61f9);
    border-radius: 10px;
  }
}

.container {
  background: url("../assets/home-page-bg.png");
  width: 100%;
  min-height: 100vh;
  padding-bottom: 100px;
  background-position: center center;
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-size: cover;
  color: #fff;
}

.title {
  .icon-left {
    position: absolute !important;
    left: 16px;
    top: 8px;
    cursor: pointer;
  }

  font-size: 17px;
  text-align: center;
  width: 100%;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 44px;
}

.qr-code {
  width: 158px;
  height: 158px;
  margin: 54px auto 0 auto;
  border-radius: 10px;
  border: 1px solid #9aa7ff;
  display: flex;
  align-items: center;
  justify-content: center;
}

.text-container {
  font-size: 12px;
  width: 310px;
  margin: 20px auto 0 auto;
  color: #d8d8d8;
  line-height: 20px;
}

.withDraw {
  width: 311px;
  margin: 40px auto 0 auto;
  background: rgba(44, 47, 61, 0.7);
  border-radius: 10px;
  border: 1px solid #9aa7ff;
  min-height: 40px;

  .van-cell {
    background-color: unset !important;
    color: #fff !important;

    .van-cell__title {
      color: #fff !important;
    }
  }

  .van-cell__title {
    color: #fff !important;
  }
}
</style>
